<template>
    <div class="M-list">
        <!-- 滚动事件怎么算？ -->
        <div class="M-listItems" v-if="data && data.length" @click="lishHandler">
            <div class="M-listItem" v-for="(item, index) in data" :key="item.id">
                <component @click.native="onCard(item)" :is="name" :item="item" :index="index" :ext="config.ext"></component>
            </div>
        </div>
        <div class="M-listEmpty" v-if="!data || !data.length">暂无数据</div>
    </div>
</template>
<script>
// 可从外部传递组件定义进来
export default {
    props: {
        data: {  //数组数据
            type: Array
        },
        name: Object,  //卡片组件定义，从页面传入
        config: {   //列表配置，接口、每页展示数目之类的
            type: Object,
            default: function(){
                return {
                    ext: {}   //需要从页面共享到卡片的数据
                }
            }
        }
    },
    methods: {
        onCard(item){
            console.log('onCard:');
            console.log(item);
        },
        lishHandler(e){
            console.log('事件委托');
            console.log(e.target);
            console.log(e.currentTarget);
        }
    },
    created: function () {

    }
};
</script>
<style lang="less">
.M-list {
    &Items {
        padding-top: 20px;
    }
    &Empty {
        text-align: center;
        color: gray;
        font-size: 28px;
    }
}
</style>